<template>
    <div class="app-container">
        <el-row :gutter="20">
            <el-col :span="4" :xs="24">
                <div class="head-container">
                    <el-tree ref="typeTreeRef" :data="typeTree" :props="{ label: 'name', children: 'children' }"
                        :expand-on-click-node="false" node-key="id" highlight-current @nodeClick="handleNodeClick" />
                </div>
            </el-col>
            <!-- 右侧内容 --->
            <el-col :span="20" :xs="24">
                 <Course v-if="choiseData.id" v-bind:subject-id="choiseData.id" v-bind:subject-name="choiseData.name"></Course>
                
            </el-col>
        </el-row>
    </div>
</template>

<script lang="ts" setup="course">
    import { ElTree } from 'element-plus';
    import { ref, reactive, getCurrentInstance, ComponentInternalInstance, watch,toRefs } from 'vue'
    import {subApi} from '@/api/app/subject/subject'
    import Course from './component/Course.vue';

    const { proxy } = getCurrentInstance() as ComponentInternalInstance;

    const typeTree = ref([])
  
    const choiseData=ref({
        id:undefined,
        name:''
    })

    //得到学科的树形数据
    function getTree() {
        subApi().then(res => {
            typeTree.value = res.data
        })
    }
   /*  */
    /** 节点单击事件 */
function handleNodeClick(data: any) { 
    choiseData.value.id=data.id
    choiseData.value.name=data.name
 
}


getTree()


</script>

<style>
</style>
